<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>休息一下</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        color: white;
        /*background: #424c50;*/
    }
    body {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        user-select: none;
        letter-spacing: 4px;
    }

    button {
        position: absolute;
        bottom: 100px;
        border: white 2px solid;
        background: transparent;
        color: white;
        padding: 10px 30px;
        border-radius: 8px;
        font-size: 16px;
        transition: all .3s;
    }
    button:focus {
        outline: none;
    }

    button:hover {
        transform:scale(0.9);
    }

</style>
<body>
<h1>
    现在，将视线移出屏幕
</h1>
<h2>倒数 <span id="cd">20</span> 秒</h2>
<button onclick="skip()">
    SKIP
</button>
</body>
<script>
    const {ipcRenderer} = require("electron")

    // 关闭窗口
    function close() {
        ipcRenderer.send("close_reset")
    }

    const cdDOM = document.getElementById("cd")
    let interval
    window.onload = () => {
        interval = setInterval(() => {
            let c = parseInt(cdDOM.innerText)
            cdDOM.innerText = (c-1).toString()
            if (c - 1 === 0) {
                clearInterval(interval)
                close()
            }
        }, 1000)
    }
    function skip() {
        clearInterval(interval)
        ipcRenderer.send("close_reset")
    }
</script>
</html>